<template>
  <div class="w-pdf">
    <div class="top-bar">
      <div class="left">
        <icon-left
          width="30"
          height="30"
          :class="{'w-pointer w-hover-glow': leftBtnEnable}"
          @click.native="leftBtnClick"
          fill="#ccc"/>
        <icon-right
          width="30"
          height="30"
          :class="{'w-pointer w-hover-glow': rightBtnEnable}"
          @click.native="rightBtnClick"
          fill="#ccc"/>
      </div>
      <div class="center">
        <span class="page-total">
          共 {{ total }} 页
        </span>
        <input
          type="number"
          v-model.number="inputPage"
          class="input-page">
      </div>
      <div class="right">
        <icon-close
          v-if="isShowClose"
          width="30"
          height="30"
          class="w-pointer w-hover-glow"
          @click.native="closeBtnClick"
          fill="#999"/>
      </div>
    </div>
    <vue-pdf
      class="vue-pdf"
      :src="url"
      :page="currentPage"
      @progress="progress"
      @loaded="loaded"
      @page-loaded="pageLoaded"
      @num-pages="numPages"
      @error="error"
      @link-clicked="linkClicked"/>
    <img
      v-if="loading"
      class="loading-img"
      src="@/assets/ImageLazy/loading.png"
      alt="">
  </div>
</template>

<script>
  import vuePdf from 'vue-pdf'
  import IconLeft from '@/icons/left.svg'
  import IconRight from '@/icons/right.svg'
  import IconClose from '@/icons/close.svg'

  /**
   * PDF显示组件
   */
  export default {
    name: "WPDF",
    components: {
      vuePdf,
      IconLeft,
      IconRight,
      IconClose
    },
    data() {
      return {
        /**
         * 当前页数
         */
        currentPage: 1,
        /**
         * 总页数
         */
        total: 0,
        /**
         * 是否加载中
         */
        loading: true,
        /**
         * 输入页数
         */
        inputPage: 1
      }
    },
    props: {
      /**
       * pdf 地址
       */
      url: {
        type: String,
        default: ''
      },
      /**
       * 是否显示关闭按钮
       */
      isShowClose: {
        type: Boolean,
        default: false
      }
    },

    watch: {
      /**
       * 输入的页数改变
       */
      inputPage(val) {
        if (typeof val === 'number' && val > 0 && val <= this.total) {
          this.currentPage = val
        }
      }
    },
    computed: {
      /**
       * 是否显示上一页按钮
       * @returns {boolean}
       */
      leftBtnEnable() {
        return this.currentPage > 1
      },
      /**
       * 是否显示下一页按钮
       * @returns {boolean}
       */
      rightBtnEnable() {
        return this.currentPage < this.total
      }
    },
    methods: {
      /**
       * 进度
       */
      progress() {
      },
      /**
       * 加载完毕后调用
       */
      loaded() {
        this.loading = false
      },
      /**
       * 分页加载完毕后调用
       */
      pageLoaded() {
      },
      /**
       * 总页数
       * @param num 总页数
       */
      numPages(num) {
        this.total = num
      },
      /**
       * 链接点击调用
       * @param x
       */
      linkClicked() {},
      /**
       * 加载失败调用
       */
      error() {
        this.loading = false
        this.$emit ('error')
      },
      /**
       * 上一页按钮点击
       */
      leftBtnClick() {
        let page = this.currentPage
        if (page > 1) {
          page -= 1
        }
        this.currentPage = page
        this.inputPage = page
      },
      /**
       * 下一页按钮点击
       */
      rightBtnClick() {
        let page = this.currentPage
        if (page < this.total) {
          page += 1
        }
        this.currentPage = page
        this.inputPage = page
      },
      /**
       * 关闭按钮点击
       */
      closeBtnClick() {
        this.$emit ('close')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .w-pdf {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    background-color: #fff;
    overflow: scroll;
    padding-top: 44px;

    .top-bar {
      height: 44px;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      background-color: #7ab1f4;
      z-index: 100;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;

      .page-total {
        color: #666;
      }

      .input-page {
        width: 70px;
        outline: none;
      }
    }

    .vue-pdf {
      max-width: 1200px;
      margin: 0 auto;
    }

    .w-hover-glow:hover, .w-hover-glow:focus, .w-hover-glow:active {
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    }

    .w-pointer {
      cursor: pointer;
    }

    @-webkit-keyframes rotation {
      from {
        -webkit-transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
      }
    }

    .loading-img {
      width: 60px;
      height: 60px;
      vertical-align: middle;
      -webkit-transform: rotate(360deg);
      animation: rotation 3s linear infinite;
      -moz-animation: rotation 3s linear infinite;
      -webkit-animation: rotation 3s linear infinite;
      -o-animation: rotation 3s linear infinite;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -30px;
      margin-top: -30px;
    }
  }
</style>
